(function () {
  let pageNum = 1; // 页码数
  let isFinished = false; // 是否结束了，没有更多数据了，不需要滚动了
  let isLoading = false;

  //发生请求
  function getAjaxList() {
    isLoading = true;
    document.querySelector('.list-box').innerHTML += '<p class="more" id="loading">数据正在加载中...</p>';
    axios({
      method: 'GET',
      url: 'http://124.223.14.236:3001/api/recipe',
      params: {
        pageSize: 12,
        pageNum,
      },
    })
      .then(function (result) {
        const list = result.data.data.list;
        if (list.length === 0) {
          isFinished = true;
          document.querySelector('.list-box').innerHTML += '<p class="noinfo" >没有数据了...</p>';
        } else {
          pageNum++;
          renderMenuList(list);
        }
      })
      .finally(function () {
        isLoading = false;
        const loadingDOM = document.getElementById('loading');
        loadingDOM.parentNode.removeChild(loadingDOM);
      });
  }
  getAjaxList();

  //渲染列表
  function renderMenuList(menuList) {
    const listStr = menuList
      .map((item, index) => {
        let { img, name, id } = item;
        const reImg = 'http://124.223.14.236:3001/public/' + img;
        return `
          <li>
            <a href="/recipeBaseCode/info.html?id=${id}">
              <img src=${reImg} alt="" />
              <h3 title="${name}">${name}</h3>
            </a>
          </li>
        `;
      }).join('');
    document.querySelector('.list-box ul').innerHTML += listStr;
  }

})();
